"use client";

import Link from "next/link";
import { useState } from "react";
import { usePathname } from "next/navigation";

export default function DesboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [count, setCount] = useState(0);
  const pathName = usePathname();

  console.log("组件更新了");

  return (
    <div className="border-2 border-dashed border-black p-4 w-1/2 mx-auto">
      <div className="flex gap-4 font-bold text-lg mb-4 text-gray-500">
        <Link
          style={{
            color: pathName === "/dashboard/about" ? "blue" : "black",
          }}
          href="/dashboard/about"
        >
          about
        </Link>
        <Link
          style={{
            color: pathName === "/dashboard/settings" ? "blue" : "black",
          }}
          href="/dashboard/settings"
        >
          settings
        </Link>
      </div>
      <h2>desboard layout</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>increment count</button>
      {children}
    </div>
  );
}
